import Taro, { Component, Config } from '@tarojs/taro'
import { Button, Form, Input, View, Textarea } from '@tarojs/components'
import './index.scss'
import lodash from '@/utils/lodash'
import { addAddress, getAddressInfo, updateAddress, delAddressInfo } from '@/api/userApi'
import { Loading, SelectCity } from "@/components/index"

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '收货地址',
    navigationBarBackgroundColor: '#f4f4f4'
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      city: {
        code: []
      },
      loading: true,
      cityArr: [],
      isOpened: false,
      addressList: [],
      addressInfo: {}
    }
  }

  componentDidShow() {
    this.getInfo()
  }

  //  显示城市弹窗
  showCityPopup(bool) {
    this.setState({
      isOpened: bool
    })
  }

  //  确定选择城市
  onConfirmCity(id, names) {
    this.setState({
      cityCode: id,
      cityArr: names
    })
  }

  //  获取收货地址
  getInfo() {
    const { id } = this.state
    if (id) {
      getAddressInfo(id).then(res => {
        const { data } = res
        this.setState({
          loading: false,
          cityArr: data.city.split(','),
          postcode: data.cityCode,
          addressInfo: data
        })
      })
    } else {
      this.setState({
        loading: false
      })
    }
  }

  //  删除地址
  delInfo(id) {
    Taro.showLoading({title: '加载中', mask: true})
    delAddressInfo(id).then(() => {
      Taro.hideLoading()
      Taro.showToast({icon: 'success', title: '删除成功', mask: true})
      Taro.navigateBack()
    })
  }

  //  选择城市 change 事件
  onChange({ detail: { code, value } }) {
    // console.log(code, value)
    const cityCode = lodash.last(code)
    this.setState({
      city: {
        code: code,
        name: value,
        value: cityCode,
      },
      cityCode,
      cityArr: value,
      isDefault: false
    })
  }

  //  默认状态
  onClickDft() {
    const { isDefault } = this.state
    this.setState({
      isDefault: !isDefault
    })
  }

  //  提交表单
  onSubmit({ detail: { value } }) {
    // console.log(value)
    const { id, cityCode, cityArr } = this.state
    value.city = cityArr.join(',')
    value.cityCode = cityCode

    if (!value.name) {
      Taro.showToast({ title: '请填写收货人', icon: 'none' })
      return
    }

    if (!value.telephone) {
      Taro.showToast({ title: '请填写手机号', icon: 'none' })
      return
    }

    if (!value.city) {
      Taro.showToast({ title: '请选择城市', icon: 'none' })
      return
    }

    if (!value.detail) {
      Taro.showToast({ title: '请填写详细地址', icon: 'none' })
      return
    }

    Taro.showLoading({title: '加载中', mask: true})
    if (id) {
      value.id = id
      updateAddress(value).then(() => {
        Taro.hideLoading()
        Taro.showToast({icon: 'success', title: '保存成功', mask: true})
        Taro.navigateBack()
      })
    } else {
      // value.isDefault = Number(isDefault)
      addAddress(value).then(() => {
        Taro.hideLoading()
        Taro.showToast({icon: 'success', title: '保存成功', mask: true})
        Taro.navigateBack()
      })
    }
  }

  render() {
    const { id, loading, cityArr, isOpened, addressInfo } = this.state
    return (<View className='address-info-page'>
      {loading && <Loading isCover/>}
      <Form onSubmit={this.onSubmit.bind(this)}>
        <View className='list'>
          <View className='list-item thin-border__b'>
            <Input name='name' value={addressInfo.name} className='list-left' placeholder='收货人' placeholderClass='placeholder'/>
          </View>
          <View className='list-item thin-border__b'>
            <Input name='telephone' value={addressInfo.telephone} type='number' maxLength={11} className='list-left' placeholder='手机号码' placeholderClass='placeholder'/>
          </View>
          <View className='list-item thin-border__b region-box' onClick={this.showCityPopup.bind(this, true)}>
            <View className='list-left'>
              {!cityArr.length && <View className='placeholder'>所在地区</View>}
              {cityArr.map((i, k) => {
                return (<View key={k} className='city-text'>{i}</View>)
              })}
            </View>
            <View className='list-right d-f a-i-c j-c-e'>
              <View className='bnn-icon right-icon'>&#xe866;</View>
            </View>
          </View>
          {/*<Picker value={city.code} mode='region' onChange={this.onChange.bind(this)}>*/}
          {/*  <View className='list-item thin-border__b region-box'>*/}
          {/*    <View className='list-left'>*/}
          {/*      {!cityArr.length && <View className='placeholder'>所在地区</View>}*/}
          {/*      {cityArr.map((i, k) => {*/}
          {/*        return (<View key={k} className='city-text'>{i}</View>)*/}
          {/*      })}*/}
          {/*    </View>*/}
          {/*    <View className='list-right d-f a-i-c j-c-e'>*/}
          {/*      <View className='bnn-icon right-icon'>&#xe866;</View>*/}
          {/*    </View>*/}
          {/*  </View>*/}
          {/*</Picker>*/}
          <View className='list-item thin-border__b textarea-box'>
            <Textarea name='detail' value={addressInfo.detail} className='list-left' placeholder='详细地址:如道路、门牌号、小区、楼栋号、单元室等' placeholderClass='placeholder'/>
          </View>
        </View>
        {/*<View className='list'>*/}
        {/*  <View className='list-item thin-border__b d-f a-i-c' onClick={this.onClickDft.bind(this)}>*/}
        {/*    <Radio color='#FFDD00' checked={isDefault}/>设置为默认地址*/}
        {/*  </View>*/}
        {/*</View>*/}

        {id && <View className='list'>
            <View className='list-item thin-border__b d-f a-i-c delete-box' onClick={this.delInfo.bind(this, id)}>删除收货地址</View>
        </View>}

        <Button formType="submit" className='xf-btn xf-btn-round xf-btn-primary btn-box'>立即保存</Button>
      </Form>

      <SelectCity isOpened={isOpened} onConfirm={this.onConfirmCity.bind(this)} onClose={this.showCityPopup.bind(this, false)}/>
    </View>)
  }
}
